import { View, Text, StyleSheet, TouchableOpacity } from "react-native"
import { Calendar } from "lucide-react-native"
import { theme } from "../../../constants/theme"

interface EmptyPlanStateProps {
    onCreatePress: () => void
}

export default function EmptyPlanState({ onCreatePress }: EmptyPlanStateProps) {
    return (
        <View style={styles.container}>
            <Calendar size={48} color={theme.colors.primary.default} />
            <Text style={styles.title}>还没有学习计划</Text>
            <Text style={styles.description}>选择一本教材，开始制定学习计划吧</Text>
            <TouchableOpacity style={styles.createButton} onPress={onCreatePress}>
                <Text style={styles.createButtonText}>去创建计划</Text>
            </TouchableOpacity>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        paddingHorizontal: theme.spacing.xxl,
    },
    title: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginTop: theme.spacing.lg,
    },
    description: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.gray,
        textAlign: "center",
        marginTop: theme.spacing.sm,
        marginBottom: theme.spacing.xl,
    },
    createButton: {
        backgroundColor: theme.colors.primary.default,
        paddingHorizontal: theme.spacing.xl,
        paddingVertical: theme.spacing.md,
        borderRadius: theme.spacing.lg,
        ...theme.shadows.small.ios,
        elevation: theme.shadows.small.android.elevation,
    },
    createButtonText: {
        color: theme.colors.neutral.white,
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
    },
})

